html,
body{
    height: 100%
}
.fl-x {
    display: flex;
}
.fl-y{
    display: flex;
    flex-direction: column;
}
ul,li,a{
    list-style: none;
    text-decoration: none;
}
.lt-layout{
    height: 100%;
    min-width: 320px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    margin: 0 auto;
    .lt-header{
        height: 45px;
        background-color: #006699;
        a{  
            width: 45px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            color: white;
        }
        h4{
            flex: 1;
            text-align: center;
            line-height: 45px;
            margin: 0;
            color: white;
        }
    }
    
    .lt-footer{
        height: 60px;
        background-color: #006699;
        .lt-footer-ul{

            width: 100%;
            display: flex;
            padding: 10px 0 10px 0;
            margin: 0;
            // line-height: 45px;
            li{
                flex: 1;
                height: 45px;
                text-align: center;
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    font-size: 16px;
                    i{
                    color: white;
                    }
                    p{
                     color: white;
                    }
                }
                
            }
            li.current{
                i{
                    color: #daa520;
                }
                p{
                    color: #daa520;
                }
            }
        }
    }
}